<script setup>
import { ref, reactive, onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted} from "vue"
import UploadFile from '@/components/UploadFile/index.vue';
import QrcodeVue from 'qrcode.vue'
// dialog弹框组件

const dialogQcodeVisible = ref(false)

const handleClose = () => {
    cancel()
}
const form = ref({
  name: '',
  region: '',
  date1: '',
  date2: '',
  delivery: false,
  type: [],
  resource: '',
  desc: '',
  fileUrl:[]
})
// https://static.91medicine.net/images/20231010/cba9fa80-90a4-4948-a8d4-41cd97e35310.png
const props = defineProps({
    dialogQcodeVisible:{
        type:Boolean,
        default:false
    },
    dialogQcodeTitle:{
        type:String,
        default:''
    },
    QcodeContent:{
        type:String,
        default:''
    },
    size:{
        type:Number,
        default:100
    },
    QcodeName:{
        type:String,
        default:''
    },
    ContentImg:{
        type:String,
        default:''
    }
})

// 定义方法
const emit = defineEmits(['changeQcodeDialog'])

const cancel = () => {
    emit('changeQcodeDialog',false)
}


//组件挂载到节点上之前执行的函数
onBeforeMount(()=>{})

//组件挂载完成后执行的函数
onMounted(()=>{})

//组件更新之前执行的函数
onBeforeUpdate(()=>{})

//组件更新完成之后执行的函数
onUpdated(()=>{})

//组件卸载之前执行的函数
onBeforeUnmount(()=>{})

//组件卸载完成后执行的函数
onUnmounted(()=>{})

</script>

<template>
  <div class="">
    <el-dialog
        v-model="props.dialogQcodeVisible"
        :title="dialogQcodeTitle"
        width="320px"
        :before-close="handleClose"
        :close-on-click-modal=false
        align-center
        >
            <div class="dialog-main">
                <div class="code-box">
                    <!-- {{ QcodeContent }} -->
                    <!-- <qrcode-vue :size="size" :value="QcodeContent"></qrcode-vue> -->
                    <!-- <div class="content-img">
                        <img style="width:100%; height:100%;" :src="QcodeContent" alt="">
                    </div> -->
                    <img style="width:100%; height:100%;" :src="QcodeContent" alt="">
                </div>
                <div class="qcode-name">
                    <span class="content-name">
                        {{QcodeName}}
                    </span>
                </div>  
            </div>
               
        </el-dialog>
  </div>
</template>

<style lang="less" scoped>
    .dialog-main{
        padding: 24px 20px;
        width: 284px;
        height: 288px;
        box-sizing: border-box;
        .code-box{
           
            display: flex;
            padding: 19px 38px 45px 38px;
            justify-content: center;
            width: 248px;
            height: 224px;
            background: url('https://static.91medicine.net/images/20231010/cba9fa80-90a4-4948-a8d4-41cd97e35310.png') no-repeat;
            background-size: 248px 224px;
            box-sizing: border-box;
            .content-img{
                width: 40px;
                height: 40px;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%,-50%);
            }
        }
        .qcode-name{
            display: flex;
            justify-content: center;
            color: #000000;
            font-family: "PingFang SC";
            font-size: 16px;
            font-style: normal;
            font-weight: 400;
            line-height: 16px;
          
            .content-name{
                white-space: nowrap; /* 防止文本换行 */
                overflow: hidden;    /* 隐藏溢出部分 */
                text-overflow: ellipsis; /* 显示省略号 */
            }
        }
    }
  
</style>
